<template>  
  <!-- 会员卡兑换 -->
  <el-dialog :before-close="close" center :visible.sync="show" :modal-append-to-body="false" width="450px" :top="top" custom-class="mce_dialog" :modal="modal" >    
    <div slot="title">
      <div class="title">会员卡兑换</div>
    </div>
    <div class="dialog_content" v-loading="exchangeLoading" element-loading-text="兑换中">
      <el-input v-model="code" placeholder="请输入会员卡卡号" onKeyUp="value=value.replace(/[\W]/g,'')" @input="enterCode()" />
      <div class="btn-box">
        <el-button type="primary" @click="doExchange()" :disabled="btnDisabled">确认兑换</el-button>
      </div>
      <div class="tips">兑换后不可撤销，请谨慎操作！</div>
    </div> 
  </el-dialog>
</template>
<script>  
  // import { postUserCardExchange } from '@/api/api'
  import http from '../../../api/fastposter'
  export default {
    name: 'MemberCardExchange',    
    props: {
      show: {
        type: Boolean,
        require: true
      },
      modal: {
        type: Boolean,
        require: true,
      },
      top: {
        type: String,
        default: '24vh'
      }
    },
    data() {
      return {        
        code: '',
        btnDisabled: true,
        exchangeLoading: false,
      }
    },
    computed: {
      userInfo() {
        return this.$store.state.userInfo
      }
    },
    created() {
      
    },
    mounted() {},
    methods: {   
      // 输入兑换码
      enterCode(event){        
        if( this.code.length>0 ){
          this.btnDisabled = false
        }else{
          this.btnDisabled = true
        }
      },
      // 关闭弹窗
      close() {
        this.code = ''
        this.$emit('close')        
      },
      // 确认兑换
      doExchange(){
        let that = this
        if( this.code.length<=0 ){
          this.$message.error('请输入兑换码')
          return
        }
        this.exchangeLoading = true
        http.postUserCardExchange({ code: this.code })
          .then((res) => {
            // console.log( res )
            if (res.code === 0) {              
              this.$message1(res.data, 'success', 2000)
              setTimeout(function(){
                window.location.reload()
              },2000);   
            } else {
              this.exchangeLoading = false
              this.$message1(res.msg, 'error')
            }                     
          })
          .catch((err)=>{            
            this.$message1(err.msg, 'error')
          })
          .finally(() => {
            this.exchangeLoading = false
          })
      }, 
    }
  }
</script>

<style lang="scss" scoped>
.mce_dialog{  
  .title{ width:100%; font-weight: bold; text-align: center; color:#333; font-size:18px; margin:30px 0 0 0; }
  .dialog_content{
    padding:0 0 10px 0;
    .btn-box{ display:flex; justify-content: center; padding:30px 0 10px; }
    .tips{ width:100%; text-align: center; font-size:12px; color:#D9001B;  }
  }
}
/deep/ .mce_dialog .el-dialog {
  .el-dialog__header {
    padding-top:10px;
    .el-dialog__headerbtn{ top:10px; }
  }
}
</style>
